<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>会员服务</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .content{}
        .content .head{padding: 0 12px;}
        .content .head .head-box{padding: 12px 0;position: relative;}
        .content .head .head-box{position: relative;overflow: hidden;}
        .content .head .left{float: left;width: 60px;height: 60px;border-radius: 60px;background-size: cover;background-position: center;}
        .content .head .center{float: left;margin-left: 12px;}
        .content .head .center .top{font-size: 14px;line-height: 20px;}
        .content .head .center .bottom{font-size: 12px;color: #666;line-height: 20px;margin-top: 20px;}
        .content .head .right{float: right;}
        .content .head .right .continue{display: block;font-size: 12px;color: #fff;background-color: #ffc10c;text-align: center;
            line-height: 25px;width: 80px;border-radius: 4px;}
        .content .head .right p{font-size: 10px;margin-top: 5px;}
        .vip-name{color: #e60014;}
        .sex{color: #049cce;}
        .star{color: #fec015;}

        .title{padding: 5px 15px;font-size: 12px;background-color: #eeedf3;color: #666;}

        .service{}
        .service ul{}
        .service ul li{line-height: 50px;border-bottom: 4px solid #eeedf3;overflow: hidden;color: #333;position: relative;
            font-size: 15px;padding: 0 15px;}
        .service ul li a:first-child{position: absolute;left: 0;top: 0;right: 110px;height: 100%;}
        .service ul li .change{width: 40px;float: right;color: #ffc10c;text-align: center;}
        .service ul li .name{float: left;}
        .service ul li .aui-switch{float: right;margin-top: 12px;}

        .add{padding: 15px;}
        .add a{color: #fff;display: block;width: 80px;font-size: 12px;line-height: 30px;text-align: center;
            background-color: #8fc320;border-radius: 4px;}

        footer{position: absolute;left: 0;bottom: 0;width: 100%;height: 140px;background-color: #eeedf3;padding: 15px;}
        footer div{}
        footer div span{display: block;margin-bottom: 4px;font-size: 12px;color: #999;}
        footer div p{margin: 5px 0;font-size: 11px;color: #999;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
    <header class="header header2">
        <div class="header-fixed">
            <div class="left">
                <a href="javascript:window.history.back();">
                    <i class="iconfont icon-arrowleft"></i>
                </a>
            </div>
            <div class="center">会员服务</div>
        </div>
    </header>
    <div class="content">
        <div class="head">
            <div class="head-box bottom-line">
                <div class="left" style="background-image: url('../img/pic_renter.png')"></div>
                <div class="center">
                    <div class="top">
                        <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                        <span class="sex"><i class="iconfont icon-women"></i></span>
                        <span class="star"><i class="iconfont icon-star2"></i></span>
                    </div>
                    <div class="bottom">会员有效期 2017-05-23</div>
                </div>
                <div class="right">
                    <a href="../html/continue_vip.html" class="continue">续费会员</a>
                    <p>欢迎加入e租人会员</p>
                </div>
            </div>
        </div>
        <p class="title">我的服务</p>
        <div class="service">
            <ul>
                <li>
                    <a href="../html/vip_service_detail.html"></a>
                    <span class="name">代驾</span>
                    <input class="aui-switch aui-switch3" type="checkbox"/>
                    <a class="change" href="../html/add_service.html">修改</a>
                </li>
            </ul>
            <div class="add">
                <a href="../html/add_service.html">添加服务</a>
            </div>
        </div>
    </div>
    <footer>
        <div>
            <span>会员特权：</span>
            <p>1.添加自己能提供的服务项目，用户在前台可自主预约你</p>
            <p>2.可在任务大厅开启自动抢单功能</p>
            <p>3.会员名称高亮，病持有会员标志</p>
            <p>4.会员发布的可投标人数为10人，非会员为5人</p>
        </div>
    </footer>
</body>
</html>